{extend name="base" /}
{block name="css"}
<style>
    /* 左树 */
    #organizationTreeBar {
        padding: 10px 15px;
        border: 1px solid #e6e6e6;
        background-color: #f2f2f2;
    }

    #organizationTree {
        border: 1px solid #e6e6e6;
        border-top: none;
        padding: 10px 5px;
        overflow: auto;
        height: -webkit-calc(100vh - 125px);
        height: -moz-calc(100vh - 125px);
        height: calc(100vh - 125px);
    }

    .layui-tree-entry .layui-tree-txt {
        padding: 0 5px;
        border: 1px transparent solid;
        text-decoration: none !important;
    }

    .layui-tree-entry.ew-tree-click .layui-tree-txt {
        background-color: #fff3e0;
        border: 1px #FFE6B0 solid;
    }

    /* 右表搜索表单 */
    #organizationUserTbSearchForm .layui-form-label {
        box-sizing: border-box !important;
        width: 90px !important;
    }

    #organizationUserTbSearchForm .layui-input-block {
        margin-left: 90px !important;
    }
</style>
{/block}
{block name="body"}
<div class="layui-col-md2">
    <div class="layui-card">
        <div class="layui-card-body" style="padding: 10px;">
            <!-- 树工具栏 -->
            <div class="layui-form toolbar" id="organizationTreeBar">
            </div>
            <!-- 左树 -->
            <div id="organizationTree"></div>
        </div>
    </div>
</div>
<div class="layui-col-md10">
    <div class="layui-card" style="padding: 0px 10px 10px 10px; ">
        <!-- 数据表格 -->
        <table id="organizationUserTable" lay-filter="organizationUserTable"></table>
        <!-- 表格操作列 -->
        <script type="text/html" id="tableTBTrack">
            <a href="{:url('admin/article/edit')}?id={{d.id}}" class="layui-btn layui-btn-sm">修改</a>
            <a href="{:url('admin/article/del')}?id={{d.id}}" class="layui-btn layui-btn-danger layui-btn-sm ajax-delete">删除</a>
        </script>
        <!-- 权限列 -->
        <script type="text/html" id="sort_order">
            <input type="text" name="sort_order" value="{{d.sort_order}}" autocomplete="off" class="layui-input ajax-update" data-url="{:url('admin/article/edit')}?id={{d.id}}">
        </script>
        <!-- 权限列 -->
        <script type="text/html" id="status">
            <input type="checkbox" name="status" lay-skin="switch" lay-filter="*" lay-text="发布|下架" data-url="{:url('admin/article/edit')}?id={{d.id}}" {{d.status==1?'checked':''}}>
        </script>
        <!-- 权限列 -->
        <script type="text/html" id="hot">
            <input type="checkbox" name="is_hot" lay-skin="switch" lay-filter="*" lay-text="是|否" data-url="{:url('admin/article/edit')}?id={{d.id}}" {{d.is_hot==1?'checked':''}}>
        </script>
        <!-- 权限列 -->
        <script type="text/html" id="tuijian">
            <input type="checkbox" name="is_tuijian" lay-skin="switch" lay-filter="*" lay-text="是|否" data-url="{:url('admin/article/edit')}?id={{d.id}}" {{d.is_tuijian==1?'checked':''}}>
        </script>
    </div>
</div>
{/block}
{block name="js"}
<script>
    layui.use(['layer', 'form', 'table', 'util', 'admin', 'tree', 'dropdown', 'xmSelect', 'treeTable'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var table = layui.table;
        var admin = layui.admin;
        var tree = layui.tree;
        var selObj, treeData;  // 左树选中数据

        /* 渲染树形 */
        function renderTree() {
            $.get("{:url('admin/article/get_category')}", function (res) {
                for (var i = 0; i < res.data.length; i++) {
                    res.data[i].title = res.data[i].name;
                    res.data[i].id = res.data[i].id;
                    res.data[i].spread = true;
                }
                treeData = layui.treeTable.pidToChildren(res.data, 'id', 'pid');
                tree.render({
                    elem: '#organizationTree',
                    onlyIconControl: true,
                    data: treeData,
                    click: function (obj) {
                        selObj = obj;
                        $('#organizationTree').find('.ew-tree-click').removeClass('ew-tree-click');
                        $(obj.elem).children('.layui-tree-entry').addClass('ew-tree-click');
                        insTb.reload({
                            where: {cid: obj.data.id},
                            page: {curr: 1},
                            url: "{:url('admin/article/index_json')}"
                        });
                    }
                });
                $('#organizationTree').find('.layui-tree-entry:first>.layui-tree-main>.layui-tree-txt').trigger('click');
            });
        }
        renderTree();

        /* 修改 */
        $('#organizationEditBtn').click(function () {
            if (!selObj) return layer.msg('未选择机构', {icon: 2});
            var title = $(this).html();
            var url = $(this).attr('href');
            var width = $(this).data('width');
            var height = $(this).data('height');
            var index = layer.open({
                title: title,
                type: 2,
                anim: 5,
                shadeClose:true,
                area: [width, height],
                content: url+'?id='+selObj.data.id,
            })
            return false;
        });

        /* 删除 */
        $('#organizationDelBtn').click(function () {
            if (!selObj) return layer.msg('未选择机构', {icon: 2});
            var url = $(this).attr('href');
            layer.confirm('确定删除'+selObj.data.name+'？', {
                icon: 3,
                title: '提示'
            }, function (index) {
                var index = layer.msg('删除中，请稍候', {
                    icon: 16,
                    time: false,
                    shade: 0.3
                });
                $.ajax({
                    url: url + '?id='+ selObj.data.id,
                    type: 'post',
                    dataType: 'json',
                    success: function (result) {
                        if (result.code === 1 && result.url != '') {
                            setTimeout(function () {
                                location.href = result.url;
                            }, 1000);
                        }
                        layer.close(index);
                        layer.msg(result.msg);
                    },
                    error: function (xhr, state, errorThrown) {
                        layer.close(index);
                        layer.msg(state + '：' + errorThrown);
                    }
                });
            });
            return false;
        });

        /* 渲染表格 */
        var insTb = table.render({
            elem: '#organizationUserTable',
            data: [],
            height: 'full-117',
            toolbar: ['<p>',
                '<a href="{:url('admin/article/add')}" class="layui-btn">添加文章</a>',
                '<button lay-event="del" class="layui-btn layui-btn-danger">批量删除</button>',
                '</p>'].join(''),
            page: true,
            cellMinWidth: 100,
            cols: [[
                {type:'checkbox',title:'#'},
                {field: 'category_name', align: 'center', sort: true, title: '分类',width:120},
                {field: 'title', align: 'left', sort: true, title: '标题'},
                {field: 'create_time', align: 'center', sort: true, title: '创建时间',width:170},
                {align: 'center', sort: false, title: '排序',templet:'#sort_order',width:100},
                {align: 'center', sort: false, title: '热门?',templet:'#hot',width:90},
                {align: 'center', sort: false, title: '推荐?',templet:'#tuijian',width:90},
                {align: 'center', sort: false, title: '状态',templet:'#status',width:100},
                {align: 'center', toolbar: '#tableTBTrack', title: '操作', width: 190}
            ]],
            parseData: function(res){ //res 即为原始返回的数据
                return {
                  "code": res.code, //解析接口状态
                  "msg": res.msg, //解析提示文本
                  "count": res.data.total, //解析数据长度
                  "data": res.data.data //解析数据列表
                };
            },
        });
        /* 表格工具条点击事件 */
        table.on('toolbar(organizationUserTable)', function (obj) {
            if (obj.event === 'del') { // 修改
                var checkRows = table.checkStatus('organizationUserTable');
                if (checkRows.data.length === 0) {
                    layer.msg('请选择要删除的数据', {icon: 2});
                    return;
                }
                var ids = checkRows.data.map(function (d) {
                    return d.id;
                });
                console.log(ids);
                $.ajax({
                    url: "{:url('admin/article/del')}",
                    type: 'post',
                    dataType: 'json',
                    data:{
                        id:ids
                    },
                    success: function (result) {
                        layer.msg(result.msg);
                        setTimeout(function () {
                            location.reload();
                        }, 1000);
                    },
                });
                
            }
            
        });

    });
</script>
{/block}